﻿@{
    Layout = null;
    ViewData["Title"] = "Index";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>人力资源档案删除</h1>

<div id="app">
    @*第一部分*@
    <div v-if="modulHid==1">
        <el-form ref="form" :model="fromdata" label-width="120px">
            @*第一行*@
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="员工所在机构">
                        <el-cascader v-model="fromdata.FSTkinds"
                                     :options="FSTkindsOptions"
                                     :props="OptionProps"
                                     clearable
                                     v-on:change="handleChangeks"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工职位分类">
                        <el-cascader v-model="fromdata.human_majors"
                                     :options="human_majorsOptions"
                                     :props="OptionProps"
                                     clearable
                                     v-on:change="handleChangehm"></el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="2">
                    <el-button type="success" round v-on:click="handleFind">查询</el-button>
                    @*<el-button type="warning" primary v-on:click="handleSearch">搜索</el-button>*@
                </el-col>
            </el-row>
            @*第二行*@
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="员工建档时间">
                        <el-date-picker v-model="fromdata.regist_time"
                                        type="daterange"
                                        range-separator="至"
                                        v-on:change="handleChangert"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    @*第二部分*@
    <div v-if="modulHid==2">
        <el-button type="success" round v-on:click="modulHid=1">返回</el-button>
        <el-table :data="human_files"
                  style="width: 100%">
            <el-table-column prop="human_id"
                             label="档案编号"
                             width="180">
                <template slot-scope="scope">
                    @*这里业务场景的点击事件,是不需要用到按钮的,所以我们需要用到的是原生的vue点击事件,而加native.prevent的精髓就在此*@
                    <el-button v-on:click.native.prevent="handleClickLook(scope.row)" type="text" size="small">{{scope.row.human_id}}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="human_name"
                             label="姓名"
                             width="100">
            </el-table-column>
            <el-table-column prop="human_sex"
                             label="性别"
                             width="100">
            </el-table-column>
            <el-table-column prop="first_kind_name"
                             label="I级机构"
                             width="130">
            </el-table-column>
            <el-table-column prop="second_kind_name"
                             label="II级机构"
                             width="130">
            </el-table-column>
            <el-table-column prop="third_kind_name"
                             label="III级机构"
                             width="130">
            </el-table-column>
            <el-table-column prop="human_major_kind_name"
                             label="职位分类"
                             width="130">
            </el-table-column>
            <el-table-column prop="human_major_name"
                             label="职位名称"
                             width="130">
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pagecurrent"
                       :page-sizes="[3, 6, 9, 11]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>
    </div>
    @*第三部分回显*@
    <div v-if="modulHid==3">
        <el-button type="danger" round v-on:click="handleHumanDelete(human_file.huf_id)">删除</el-button>
        <el-button type="success" round v-on:click="modulHid=2">返回</el-button>
        @*回显的表格*@
        <div style="margin-top:20px"></div>
        <table width="90%" border="1" cellpadding=3 cellspacing=1
               bordercolorlight=#848284 bordercolordark=#eeeeee
               class="TABLE_STYLE1">
            <tr>
                <td class="TD_STYLE1">
                    档案编号
                </td>
                <td colspan="6" class="TD_STYLE2">
                    <el-input v-model="human_file.human_id" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1" width="11%">
                    I级机构
                </td>
                <td width="14%" class="TD_STYLE2">
                    <el-input v-model="human_file.first_kind_name" readonly></el-input>
                </td>
                <td class="TD_STYLE1" width="11%">
                    II级机构
                </td>
                <td width="14%" class="TD_STYLE2">
                    <el-input v-model="human_file.second_kind_name" readonly></el-input>
                </td>
                <td class="TD_STYLE1" width="11%">
                    III级机构
                </td>
                <td width="14%" class="TD_STYLE2">
                    <el-input v-model="human_file.third_kind_name" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位分类
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_major_kind_name" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    职位名称
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_major_name" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    职称
                </td>
                <td colspan="2" class="TD_STYLE2">
                    <el-input v-model="human_file.human_pro_designation" readonly></el-input>
                </td>
                <td rowspan="4" style="text-align: center;">
                    @*这里只用img*@
                    <img id="preview_photo" :src="human_file.human_picture" width="200px" height="200px">
                    <!--<el-upload class="avatar-uploader"
                               action="/RenLiZiYuanDangAnGuanLi/Img"
                               :show-file-list="false"
                    @*:on-success="handleAvatarSuccess"*@
                    @*:before-upload="beforeAvatarUpload"*@>
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>-->
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    姓名
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_name" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    性别
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_sex" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    EMAIL
                </td>
                <td colspan="2" class="TD_STYLE2">
                    <el-input v-model="human_file.human_email" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    电话
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_telephone" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    QQ
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_qq" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    手机
                </td>
                <td colspan="2" class="TD_STYLE2">
                    <el-input v-model="human_file.human_mobilephone" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    住址
                </td>
                <td colspan="3" class="TD_STYLE2">
                    <el-input v-model="human_file.human_address" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    邮编
                </td>
                <td colspan="2" class="TD_STYLE2">
                    <el-input v-model="human_file.human_postcode" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    国籍
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_nationality" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    出生地
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_birthplace" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    生日
                </td>
                <td width="13%" class="TD_STYLE2">
                    <el-input v-model="human_file.human_birthday" readonly></el-input>
                </td>
                <td width="11%" class="TD_STYLE1">
                    民族
                </td>
                <td class="TD_STYLE2" width="14%">
                    <el-input v-model="human_file.human_race" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    宗教信仰
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_religion" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    政治面貌
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_party" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    身份证号码
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_id_card" v-on:blur="getAge()"></el-input>
                </td>
                <td class="TD_STYLE1">
                    社会保障号码
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_society_security_id" class="INPUT_STYLE2"></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    年龄
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_age" readonly="readonly"></el-input>
                </td>
                <td class="TD_STYLE1">
                    学历
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_educated_degree" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    教育年限
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_educated_years" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    学历专业
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_educated_major" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    薪酬标准
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.salary_standard_name" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    开户行
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_bank"></el-input>
                </td>
                <td class="TD_STYLE1">
                    帐号
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_account"></el-input>
                </td>
                <td class="TD_STYLE1">
                    复核人
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.checker"></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    复核时间
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.check_time" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    特长
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_speciality" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    爱好
                </td>
                <td class="TD_STYLE2">
                    <el-input v-model="human_file.human_hobby" readonly></el-input>
                </td>
                <td class="TD_STYLE1">
                    &nbsp;
                </td>
                <td class="TD_STYLE2">
                    &nbsp;
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    档案附件
                </td>
                <td colspan="7" class="TD_STYLE2">
                    测试文件上传文本.txt
                    @*<a :href=href>{{fujian}}</a>*@
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    个人履历
                </td>
                <td colspan="7" class="TD_STYLE2">
                    <el-input type="textarea" v-model="human_file.human_histroy_records" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    家庭关系信息
                </td>
                <td colspan="7" class="TD_STYLE2">
                    <el-input type="textarea" v-model="human_file.human_family_membership" readonly></el-input>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    备注
                </td>
                <td colspan="7" class="TD_STYLE2">
                    <el-input type="textarea" v-model="human_file.remark" readonly></el-input>
                </td>
            </tr>
        </table>
    </div>

</div>


<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //一至三级数据源集合
            FSTkindsOptions: [],
            //职位分类数据源集合
            human_majorsOptions: [],
            //支撑轴，参数配置
            OptionProps: {
                expandTrigger: 'hover',
                value: 'id',
                label: 'name',
                children: "children",
            },
            //初始查询表单
            fromdata: {
                //1-3级机构选中项绑定值
                FSTkinds: [],
                // 职位分类选中项绑定值
                human_majors: [],
                //选择的时间区间
                regist_time: [],
            },
            //模块显示标记
            modulHid: 1,
            //页容量
            pagesize: 3,
            //起始页码
            pagecurrent: 1,
            //数据总数
            rows: 0,
            //表单集合
            human_files: [],
            //开始时间
            openTime: '',
            //结束时间
            closeTime: '',
            //单个人力资源对象，
            human_file: {},
        },
        methods: {
            //一至三级联级选择器ajax请求方法
            GetFSTkinds: function() {
                return axios.get("/ConfigFile/ConfigFilesFind");
            },
            //职位分类联级选择器ajax请求方法
            Gethuman_majors: function() {
                return axios.get("/EngageResume/CMKCascader");
            },
            //获取两大联级选择器的方法,刷新
            fill() {
                axios.all([this.GetFSTkinds(), this.Gethuman_majors()]).then(axios.spread((res1, res2) => {
                    console.info("res1:", res1, ",res2:", res2);
                    this.FSTkindsOptions = res1.data;
                    this.human_majorsOptions = res2.data;
                }))
            },
            //查询按钮的点击事件
            handleFind() {
                //使用formData来进行传值
                //console.info("时间：", this.opentime, this.closetime);
                var fdata = new FormData();
                fdata.append("human_file_status", 1);
                fdata.append("FSTkinds", this.fromdata.FSTkinds);
                fdata.append("human_majors", this.fromdata.human_majors);
                //实在不行给时间类型转string，后台再转换回来
                fdata.append("regist_timeOpen", this.opentime);
                fdata.append("regist_timeClose", this.closetime);
                fdata.append("pagesize", this.pagesize);
                fdata.append("pagecurrent", this.pagecurrent);
                //这里是带分页的,并打开第二个模块
                axios.post('/HumanFileDele/HumanFileFind', fdata).then(res => {
                    //console.info(res.data);
                    this.human_files = res.data.tabs;
                    this.rows = res.data.rows;
                    this.modulHid = 2;
                })
            },
            //搜索按钮的点击事件
            //handleSearch() {

            //},
            //一至三级机构联级选择器值改变事件
            handleChangeks(val) {
                console.info("valKinds:", val);
            },
            //职位分类联级选择器值改变事件
            handleChangehm(val) {
                console.info("valHuMJ:", val);
            },
            //建档时间选择器值改变事件
            handleChangert(val) {
                console.info("valRegtime:", val);
                if (val == null) {
                    //将时间数组重新赋空，否则请求将报错
                    //this.fromData.regist_time = [];
                    this.opentime = "";
                    this.closetime = "";
                } else {
                    this.opentime = this.msToDate(this.fromdata.regist_time[0]).withoutTime;
                    this.closetime = this.msToDate(this.fromdata.regist_time[1]).withoutTime;

                }
            },
            //单行点击事件，行内的human_id点击
            handleClickLook(row) {
                //给对象赋值，然后打开第三个模块
                this.human_file = row;
                console.info("human_file:",this.human_file);
                this.modulHid = 3;
            },
            //人力资源档案删除的按钮
            handleHumanDelete(huf_id) {
                this.$confirm("确定要删除该条档案嘛？").then(res => {
                    axios.delete("/HumanFileDele/HumanFileUdpDel?huf_id=" + huf_id).then((res) => {
                        if (res.data > 0) {
                            this.$message({ message: '删除档案成功！', type: 'success' });
                            this.handleFind();
                        }
                    })
                }).catch(err => {
                    this.$message({ message: "取消删除操作", type: 'warning' });
                })

            },

            //页面容量大小改变事件
            handleSizeChange(val) {
                this.pagesize = val;
                this.handleFind();
            },
            //页面下标改变事件
            handleCurrentChange(val) {
                this.pagecurrent = val;
                this.handleFind();
            },
            //将中国标准时间进行转换成常规时间字符方法，实现方法返回2个值，一个是带时分秒.hasTime，另一个不带.withoutTime
            msToDate(msec) {
                let datetime = new Date(msec);
                let year = datetime.getFullYear();
                let month = datetime.getMonth();
                let date = datetime.getDate();
                let hour = datetime.getHours();
                let minute = datetime.getMinutes();
                let second = datetime.getSeconds();
                let result1 = year +
                    '-' +
                    ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                    '-' +
                    ((date + 1) < 10 ? '0' + date : date) +
                    ' ' +
                    ((hour + 1) < 10 ? '0' + hour : hour) +
                    ':' +
                    ((minute + 1) < 10 ? '0' + minute : minute) +
                    ':' +
                    ((second + 1) < 10 ? '0' + second : second);

                let result2 = year +
                    '-' +
                    ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
                    '-' +
                    ((date + 1) < 10 ? '0' + date : date);

                let result = {
                    hasTime: result1,
                    withoutTime: result2
                };
                return result;
            },
        },
        mounted: function() {
            this.fill();

        }


    })

</script>